<template>
  <div class="join-box">
    <!-- <el-card class="box-card" shadow="never">
      <div class="search-box" style="overflow: hidden">
        <div class="search-left">
          <el-icon><Search /></el-icon>
          <span>筛选搜索</span>
        </div>

        <div class="search-right">
          <el-button @click="resetFun" class="reset-btn">
            <span>重置</span>
          </el-button>
          <el-button type="primary" @click="getLeftLists" class="el-button">
            <span>查询结果</span>
          </el-button>
        </div>
      </div>

      <el-form :model="search" ref="search" label-width="100px" class="search-form" style="overflow-x: auto">
        <el-form-item label="职位:" prop="name">
          <el-input v-model="search.title" size="large" placeholder="请输入内容" @change="getLeftLists" clearable></el-input>
        </el-form-item>
      </el-form>
    </el-card> -->

    <div class="left-right-box">
      <div class="left-box">
        <div class="title">
          <span>招聘大类</span>
          <!-- <span class="icon" @click="addLeftLists">+</span> -->
        </div>
        <div v-for="(item, i) in leftLists" :key="i" :class="{ 'left-lists': true, active: item.id == leftActId }" @click="leftItemCli(item.id)">
          <!-- @mouseenter="leftItemOver(item.id)" -->
          <!-- @mouseleave="leftItemOut(item.id)" -->
          <div class="name" v-if="leftEditActId != item.id">{{ item.name }}</div>
          <div @click.stop="editInput">
            <el-input v-model="item.name" v-if="leftEditActId == item.id" class="input-name" placeholder="请输入内容"></el-input>
          </div>
          <!-- 鼠标放上去 -->
          <div class="option" v-if="leftOverActId == item.id">
            <el-icon style="padding: 6px; cursor: pointer; font-size: 16px" @click.stop="leftEditCli(item)"><component :is="'Edit'" /></el-icon>
            <el-icon style="padding: 6px; cursor: pointer; font-size: 16px" @click.stop="DelLeftCli(item.id, i)"><component :is="'Delete'" /></el-icon>
          </div>
          <!-- 点击编辑图标进入编辑状态 -->
          <div class="option" v-if="leftEditActId == item.id">
            <el-icon style="padding: 6px; cursor: pointer; font-size: 16px" @click.stop="cancelLeftEdit(item)"><component :is="'Close'" /></el-icon>
            <el-icon style="padding: 6px; cursor: pointer; font-size: 16px" @click.stop="confirmLeftEdit(item)"><component :is="'Check'" /></el-icon>
          </div>
        </div>
      </div>

      <div class="left-box">
        <div class="title">
          <span>招聘小类</span>
          <!-- <span class="icon" @click="addRightLists">+</span> -->
        </div>
        <div v-for="(item, i) in rightLists" :key="i" :class="{ 'left-lists': true, active: item.id == rightActId }" @click="rightItemCli(item.id)">
          <!-- @mouseenter="rightItemOver(item.id)" -->
          <!-- @mouseleave="rightItemOut(item.id)" -->
          <div class="name" v-if="rightEditActId != item.id">{{ item.name }}</div>
          <div @click.stop="editInput">
            <el-input v-model="item.name" v-if="rightEditActId == item.id" class="input-name" placeholder="请输入内容"></el-input>
          </div>
          <!-- 鼠标放上去 -->
          <div class="option" v-if="rightOverActId == item.id">
            <el-icon style="padding: 6px; cursor: pointer; font-size: 16px" @click.stop="rightEditCli(item)"><component :is="'Edit'" /></el-icon>
            <el-icon style="padding: 6px; cursor: pointer; font-size: 16px" @click.stop="DelRightCli(item.id, i)"><component :is="'Delete'" /></el-icon>
          </div>
          <!-- 点击编辑图标进入编辑状态 -->
          <div class="option" v-if="rightEditActId == item.id">
            <el-icon style="padding: 6px; cursor: pointer; font-size: 16px" @click.stop="cancelRightEdit(item)"><component :is="'Close'" /></el-icon>
            <el-icon style="padding: 6px; cursor: pointer; font-size: 16px" @click.stop="confirmRightEdit(item)"><component :is="'Check'" /></el-icon>
          </div>
        </div>
      </div>

      <div class="right-box">
        <el-card class="table-card">
          <template #header>
            <el-button @click="addLists()" size="large" icon="Plus">添加职位</el-button>
          </template>
        </el-card>
        <el-table :data="lists" border style="width: 100%" @row-click="rowCli">
          <el-table-column prop="id" label="编号" align="center" width="100px" header-align="center">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>

          <el-table-column prop="jobsName" label="标题" align="center" header-align="center"> </el-table-column>

          <el-table-column prop="isHot" label="是否热门" align="center" header-align="center">
            <template #default="scope">
              <div @click.stop="changeHot(scope.row.isHot, scope.row.id)">
                <el-switch v-model="scope.row.isHot" />
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="createTime" label="时间" align="center" header-align="center"> </el-table-column>

          <el-table-column label="操作" align="center" header-align="center" width="160px">
            <template #default="scope">
              <el-icon @click.stop="editFun(scope.row)" class="lists-edit-icon"><Edit /></el-icon>
              <el-icon @click.stop="deleteFun(scope.row.id, scope.$index)" class="lists-delete-icon"><Delete /></el-icon>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 添加编辑大类小类 -->
    <addEdit :show="showAddEdit" :addEditData="addEditData" :status="addEditStatus" :type="addEditType" @change-addEdit="changeAddEdit" />

    <!-- 添加编辑职位 -->
    <addEditDetail
      :show="showAddEditDetail"
      :addEditData="addEditDetailData"
      :typeId="rightActId"
      :status="addEditDetailStatus"
      @change-addEdit-detail="changeAddEditDetail"
    />
  </div>
</template>
<script setup>
import { computed, onMounted, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import Join from '@api/join/index'
import addEdit from './components/addEdit.vue'
import addEditDetail from './components/addEditDetail.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()

// *********************************************大类小类
//大类小类
const addEditType = ref('left') //大类小类类型
const showAddEdit = ref(false) //显示隐藏弹框
const addEditStatus = ref('add') //状态
const addEditData = reactive({
  //添加编辑数据
  id: '',
  name: ''
})

//大类列表
const leftLists = ref([]) //左边列表
const leftActId = ref('') //选中id
const leftEditActId = ref('') //编辑id
const leftOverActId = ref('') //放上去id

//获取大类列表
async function getLeftLists() {
  let res = await new Join().getTypes({ parentCode: '1' })
  if (res.code == 200) {
    leftLists.value = res.data

    leftActId.value = res.data[0].id

    getRightLists(res.data[0].id)
  }
}

//小类列表
const rightLists = ref([])
// 获取小类列表
async function getRightLists(code) {
  let res = await new Join().getTypes({ parentCode: code ? code : leftActId.value })
  if (res.code == 200) {
    rightLists.value = res.data

    rightActId.value = res.data[0].id

    getLists()
  }
}

//添加编辑大类小类回调
function changeAddEdit(data, status, type) {
  showAddEdit.value = false
  let { id, name } = data
  //左边还是右边列表
  let listsData = type == 'left' ? leftLists : rightLists

  if (status == 'add') {
    listsData.value.push({
      id: listsData.value.length + 1,
      time: '2022-03-28 10:42',
      name
    })
  } else if (status == 'edit') {
    listsData.value.forEach((v, i, arr) => {
      if (v.id == id) {
        v.name = name
      }
    })
  }
}

//取消编辑
function cancelLeftEdit() {
  leftEditActId.value = ''
}

//确认编辑
function confirmLeftEdit() {
  leftEditActId.value = ''
}

//编辑左边数据按钮
function leftEditCli(item) {
  leftEditActId.value = item.id
  leftOverActId.value = ''
  leftStatus.value = 'edit'
}

//删除左边数据
function DelLeftCli(id, index) {
  let data = leftLists.value
  data.splice(index, 1)
  leftActId.value = data.length ? data[0].id : ''
  getLists()
}

//鼠标over事件
function leftItemOver(id) {
  if (leftEditActId.value != id) {
    leftOverActId.value = id
  }
}

//鼠标out事件
function leftItemOut() {
  leftOverActId.value = ''
  // this.leftEditActId = "";
}

//点击左边列表
function leftItemCli(id) {
  leftActId.value = id
  leftEditActId.value = ''
  getRightLists()
}

//添加左边大类
function addLeftLists() {
  showAddEdit.value = true
  addEditData.id = ''
  addEditData.name = ''
  addEditType.value = 'left'
}

// *********************************************小类样式
const rightActId = ref('') //选中id
const rightEditActId = ref('') //编辑id
const rightOverActId = ref('') //放上去id

//取消编辑
function cancelRightEdit() {
  rightEditActId.value = ''
}

//确认编辑
function confirmRightEdit() {
  rightEditActId.value = ''
}

//编辑左边数据按钮
function rightEditCli(item) {
  rightEditActId.value = item.id
  rightOverActId.value = ''
  rightStatus.value = 'edit'
}

//删除左边数据
function DelRightCli(id, index) {
  let data = rightLists.value
  data.splice(index, 1)
  rightActId.value = data.length ? data[0].id : ''
  getLists()
}

//鼠标over事件
function rightItemOver(id) {
  if (rightEditActId.value != id) {
    rightOverActId.value = id
  }
}

//鼠标out事件
function rightItemOut() {
  rightOverActId.value = ''
  // this.leftEditActId = "";
}

//点击右边列表
function rightItemCli(id) {
  rightActId.value = id
  rightEditActId.value = ''
  getLists()
}

//添加大类
function addRightLists() {
  showAddEdit.value = true
  addEditData.id = ''
  addEditData.name = ''
  addEditType.value = 'right'
}

// *********************************************职位
const showAddEditDetail = ref(false) //显示隐藏添加编辑弹框
const addEditDetailStatus = ref('add') //添加编辑状态
const addEditDetailData = ref({
  id: '',
  name: '',
  hot: true,
  zhiweiContent: '[]',
  zhiweiHtml: '',
  gangweiContent: '[]',
  gangweiHtml: ''
}) //添加编辑数据
const lists = ref([]) //职位列表
const search = {
  //搜索条件
  title: ''
}

//重置搜索条件
function resetFun() {}

//获取职位列表
async function getLists() {
  let res = await new Join().getLists({ pageNum: 1, pageSize: 30, positionType: rightActId.value })
  if (res.code == 200) {
    lists.value = res.data.list.map((v) => {
      return {
        ...v,
        isHot: v.isHot ? true : false
      }
    })
  }
}

//添加职位
function addLists() {
  showAddEditDetail.value = true
  addEditDetailData.value = {
    id: '',
    name: '',
    hot: false,
    zhiweiContent: '[]',
    zhiweiHtml: '',
    gangweiContent: '[]',
    gangweiHtml: ''
  }

  console.log(rightActId.value)
  addEditDetailStatus.value = 'add'
}

//添加编辑职位回调
function changeAddEditDetail(data, status, type) {
  showAddEditDetail.value = false

  if (status == 'add') {
    getLists()
  } else if (status == 'edit') {
    getLists()
  }
}

//编辑职位
function editFun(item) {
  let { id, jobsName, isHot, jobsRequirements, jobsRequirementsContent, positionDescribe, positionDescribeContent } = item

  addEditDetailData.value = {
    id,
    name: jobsName,
    hot: isHot,
    zhiweiContent: positionDescribeContent,
    zhiweiHtml: positionDescribe,
    gangweiContent: jobsRequirementsContent,
    gangweiHtml: jobsRequirements
  }
  showAddEditDetail.value = true
  addEditDetailStatus.value = 'edit'
}

//删除职位
function deleteFun(id, index) {
  ElMessageBox.confirm('确定删除职位?')
    .then(async () => {
      let res = await new Join().del({ id })
      if (res.code == 200) {
        getLists()
      }
    })
    .catch(() => {})
  // lists.value.splice(index, 1)
}

//查看详情
function rowCli(row, column) {
  let { id, jobsName, jobsRequirements, jobsRequirementsContent, positionDescribe, positionDescribeContent } = row

  addEditDetailData.value = {
    id,
    name: jobsName,
    hot: true,
    zhiweiContent: positionDescribeContent,
    zhiweiHtml: positionDescribe,
    gangweiContent: jobsRequirementsContent,
    gangweiHtml: jobsRequirements
  }
  showAddEditDetail.value = true
  addEditDetailStatus.value = 'read'
}

//修改热门状态
async function changeHot(hot, id) {
  let res = await new Join().edit({ id, isHot: hot ? '1' : '0' })

  if (res.code == 200) {
    ElMessage({
      message: `更新成功!`,
      type: 'success'
    })
    getLists()
  }
}

onMounted(() => {
  getLeftLists()
})
</script>
<style lang="scss">
.join-box {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  .left-right-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;

    .left-box {
      height: 100%;
      width: 230px;
      overflow-y: auto;
      overflow-x: hidden;
      padding-top: 50px;
      box-sizing: border-box;
      border: 1px solid #ebeef5;
      position: relative;
      overflow-y: auto;
      border-radius: 4px;
      margin-right: 20px;

      .title {
        font-size: 14px;
        padding: 8px 17px;
        color: #636363;
        height: 32px;
        line-height: 32px;
        font-weight: 600;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 999;
        .icon {
          float: right;
          font-size: 24px;
          font-weight: 400;
          cursor: pointer;
        }
      }

      .left-lists {
        font-size: 12px;
        padding: 8px 17px;
        color: #636363;
        height: 32px;
        line-height: 32px;
        cursor: pointer;
        position: relative;

        .name {
          float: left;
        }

        .input-name {
          width: 90px;
          float: left;
          padding: 0;

          .el-input__inner {
            padding: 0 10px;
          }
        }

        .option {
          float: right;
        }
      }
    }

    .left-lists.active {
      color: #4c9ff2 !important;
      background-color: #f5f5f5;
    }

    .right-box {
      flex: 1;
      overflow-y: auto;
    }
  }
}
</style>
